<template>
  <div class="page_padding logistics_add">
    <MyNavBar @goback="goback" title="办公用品申请单" />
    <div class="add_con">
      <div class="con_box">
        <div class="box_head">
          <div class="head_info">
            <div class="info_org">部门名称：{{ formData.orgName }}</div>
            <div class="info_num">总人数：{{ formData.headCount }}人</div>
          </div>
        </div>
        <div class="box_info">
          <van-collapse v-model="activeName" accordion :border="false">
            <div class="info_box">
              <van-collapse-item
                :border="false"
                class="box_collapse"
                :name="index + 1"
                v-for="(item, index) in formData.tableData"
                :key="index"
                :disabled="formData.tableData.length === 1"
                :class="{ no_collapse: formData.tableData.length == 1 }">
                <template #title>
                  <div class="coll_title">
                    <div class="title_left">
                      <span class="title_tips">{{ getDoubleNum(index + 1) }}</span>
                      <div class="title_info" v-if="activeName != index + 1">
                        <span>{{ item.name }}</span>
                        <span>{{ item.applyNumber }}</span>
                        <span>{{ item.specs }}</span>
                      </div>
                    </div>
                    <div class="title_r" v-if="formData.tableData.length > 1">
                      <span @click.stop="cancelinfo(index)" class="">
                        <van-icon name="delete-o" />
                        删除
                      </span>
                    </div>
                  </div>
                </template>
                <div class="info_input_data">
                  <div class="info_text">
                    <div class="info_text_title">物品名称</div>
                    <div class="info_text_r" @click="chooseThing(item, index)">
                      <van-cell is-link :class="{ placeholder: !item.name }">
                        <template #default>
                          {{ item.name || '请选择物品' }}
                        </template>
                      </van-cell>
                    </div>
                  </div>
                  <div class="info_text pad_left_board">
                    <div class="info_text_title">规格</div>
                    <div class="info_text_r">
                      <van-cell :class="{ placeholder: !item.specs }">
                        <template #default>
                          {{ item.specs || '请选择' }}
                        </template>
                      </van-cell>
                    </div>
                  </div>
                </div>
                <div class="info_input_data">
                  <div class="info_text">
                    <div class="info_text_title">申请数量</div>
                    <div class="info_input_r">
                      <van-field
                        class="info_fied_input"
                        maxlength="4"
                        v-model="item.applyNumber"
                        label=""
                        type="number"
                        placeholder="请输入"
                        @blur="inputBlur($event, index)" />
                    </div>
                  </div>
                </div>
                <div class="info_input_data remark">
                  <div class="info_text">
                    <div class="info_text_title">备注</div>
                    <div class="info_input_r">
                      <van-field
                        class="info_fied_input"
                        v-model="item.remark"
                        label=""
                        placeholder="请输入"
                        type="textarea"
                        autosize
                        rows="1" />
                    </div>
                  </div>
                </div>
              </van-collapse-item>
              <div class="now_info_add">
                <div class="info_add-one" @click="addRowsinfo">
                  <van-icon name="add-o" class="add_icon" />
                  <span>添加</span>
                </div>
              </div>
            </div>
          </van-collapse>
        </div>
        <div class="box_annex">
          <ImgUpload titleWord="附件：" v-bind:albumList.sync="formData.enclosureList" />
        </div>
      </div>
      <!-- 底部 -->
      <div class="fead_boot">
        <van-button plain type="info" @click="saveData('0')">暂存</van-button>
        <van-button type="info" @click="saveData('1')">提交</van-button>
      </div>
    </div>
    <van-action-sheet
      v-model="actionShow"
      close-on-click-action
      :round="false"
      @select="onSelect"
      :actions="chooseList"
      max-height="70%"></van-action-sheet>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import ImgUpload from '@com/ImgUpload'
import moment from 'moment'
import { getAddDetailInfo, addLogicticsInfo, updateLogicticsInfo } from '@api/api-dailyManage.js'
import { getDoubleNum } from '@common/utility'
export default {
  name: 'logisticsAdd',
  components: {
    MyNavBar,
    ImgUpload,
  },
  data() {
    return {
      getDoubleNum,
      moment: moment,
      formData: {
        year: moment().format('YYYY'),
        month: moment().format('MM'),
        enclosureList: [],
        tableData: [],
        applyType: '1',
        orgName: '',
        headCount: '',
      },
      userInfo: JSON.parse(localStorage.userInfo),
      activeName: 1,
      thingList: [],
      chooseList: [],
      activeIndex: '',
      actionShow: false,
      activeInfo: {},
      formId: '',
    }
  },
  watch: {
    formData: {
      handler(news) {
        const arr = this.thingList.filter(itemA => {
          return news.tableData.every(itemB => {
            return itemB.typeId !== itemA.typeId
          })
        })
        this.chooseList = arr
      },
      deep: true,
      immediate: true,
    },
  },
  created() {
    this.formId = sessionStorage.formId || ''
    this.getAddDetailInfo()
  },
  mounted() {},
  destroyed() {
    sessionStorage.removeItem('formId')
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    cancelinfo(index) {
      this.formData.tableData.splice(index, 1)
      this.activeName = index === 0 ? 1 : index
    },
    addRowsinfo() {
      this.formData.tableData.push({
        name: '',
        typeId: '',
        defaultQty: '',
        applyNumber: '',
        realityNumber: 0,
        specs: '',
        isEdit: true,
      })
      this.activeName = this.formData.tableData.length
    },
    getAddDetailInfo() {
      const param = {
        orgId: this.userInfo.loginPostInfo.orgId,
        applyType: this.formData.applyType,
      }
      getAddDetailInfo(param).then(res => {
        const data = res.data
        this.formData.orgName = data.orgName
        this.formData.headCount = data.headCount
        this.thingList = JSON.parse(JSON.stringify(data.itemTypeList))
        this.formData.tableData = data.itemTypeList.slice(0, 1)
        this.$set(this.formData.tableData[0], 'applyNumber', this.formData.tableData[0].defaultQty)
        this.$set(this.formData.tableData[0], 'realityNumber', this.formData.tableData[0].defaultQty)
      })
    },
    chooseThing(item, index) {
      const arr = this.thingList.filter(itemA => {
        return this.formData.tableData.every(itemB => {
          return itemB.typeId !== itemA.typeId
        })
      })
      this.activeIndex = index
      if (item.name) {
        this.activeInfo = item
        arr.unshift(item)
      } else {
        this.activeInfo = {}
      }
      this.chooseList = arr
      this.actionShow = true
    },
    onSelect(val) {
      const item = val
      const index = this.activeIndex
      this.$set(this.formData.tableData[index], 'detailId', item.detailId || '')
      this.$set(this.formData.tableData[index], 'typeId', item.typeId)
      this.$set(this.formData.tableData[index], 'name', item.name)
      this.$set(this.formData.tableData[index], 'specs', item.specs)
      this.$set(this.formData.tableData[index], 'defaultQty', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'applyNumber', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'realityNumber', item.defaultQty || 0)
      this.$set(this.formData.tableData[index], 'remark', item.remark)
    },
    saveData(type) {
      let dataList = []
      if (type === '0') {
        const arr = this.formData.tableData.filter(item => {
          return !item.name
        })
        if (arr.length === this.formData.tableData.length) {
          return this.$toast.fail('请至少选择一种办公用品')
        }
        dataList = this.formData.tableData.filter(item => {
          return item.name
        })
      } else {
        const arr = this.formData.tableData.filter(item => {
          return !item.name || !Number(item.applyNumber)
        })
        if (arr.length > 0) {
          return this.$toast.fail('您有尚未填写完整的内容，请先完成或者取消。')
        }
        dataList = this.formData.tableData
      }
      // let obj = this.formData.tableData[this.formData.tableData.length - 1]
      // if (!obj.name || !Number(obj.applyNumber)) {
      //   return this.$toast('您有暂未完成的内容，请先完成或者删除')
      // }
      const title = Number(this.formData.month) + '月办公用品领用单'
      dataList.forEach((item, index) => {
        this.$set(item, 'sort', index + 1)
      })
      const param = {
        applyType: this.formData.applyType,
        enclosureList: this.formData.enclosureList,
        headCount: this.formData.headCount,
        itemTypeList: dataList,
        orgName: this.formData.orgName,
        orgId: this.userInfo.loginPostInfo.orgId,
        year: this.formData.year,
        month: Number(this.formData.month),
        title: title,
        isSave: type,
        id: this.formId,
      }
      if (this.formId) {
        updateLogicticsInfo(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      } else {
        addLogicticsInfo(param).then(res => {
          if (res.code === 0) {
            if (type === '0') {
              sessionStorage.setItem('formId', res.data)
              this.formId = res.data
              this.$toast.success('暂存成功')
            } else {
              this.$toast.success('提交成功')
              setTimeout(() => {
                this.$router.go(-1)
              }, 500)
            }
          }
        })
      }
    },
    inputBlur(e, index) {
      this.formData.tableData[index].applyNumber = e.target.value
      this.formData.tableData[index].realityNumber = e.target.value
    },
  },
}
</script>

<style lang="scss" scoped>
.logistics_add {
  /deep/ .van-popup {
    position: absolute;
  }
}
.add_con {
  .con_box {
    width: 100%;
    background-color: #ffffff;
    padding: 10px 10px;
    box-shadow: 0 0 10px 0 rgba(4, 0, 0, 0.15);
    border-radius: 5px;
    .box_head {
      .head_info {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #efefef;
      }
    }
    .box_info {
      .info_box {
        /deep/ .van-collapse-item {
          .van-collapse-item__content {
            padding: 0;
          }
        }
        .no_collapse {
          /deep/ .van-collapse-item__title {
            .van-icon-arrow {
              display: none;
            }
          }
        }
        .box_collapse {
          padding: 0 10px;
          border-bottom: 2px solid #f0f0f0;
          margin-bottom: 7px;
          /deep/.van-cell {
            padding: 10px 0;
          }
        }
        .coll_title {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
        .title_left {
          font-weight: 800;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          flex: 1;
          width: 0;
          display: flex;
          .title_tips {
            background-image: linear-gradient(#ffffff 50%, #f9f1e8);
            color: #333333;
          }
          .title_info {
            padding-left: 12px;
            color: #333333;
            span {
              margin-right: 5px;
            }
          }
        }
        .title_r {
          display: flex;
          align-items: center;
          color: #4b79bb;
          font-size: 12px;
          margin-right: 7px;
          span {
            display: flex;
            align-items: center;
          }
        }
        .info_input_data {
          display: flex;
          .info_text {
            // width: 50%;
            flex: 1;
            border-top: 1px solid #f0f0f0;
          }
          .pad_left_board {
            width: 90px;
            max-width: 90px;
            padding-left: 5px;
          }
        }
        .remark {
          .info_text {
            // width: 100%;
            .info_input_r {
              padding-left: 15px;
              .info_fied_input {
                height: auto !important;
              }
            }
          }
        }

        .info_text {
          display: flex;
          align-items: center;
          padding: 5px 0;
          .info_text_title {
            color: #333333;
            font-size: 12px;
          }
          .info_text_r {
            flex: 1;
            text-align: right;
            span {
              margin-right: 8px;
            }
            .van-cell {
              justify-content: flex-end;
              padding: 0;
              .van-cell__value {
                text-align: right;
                font-size: 12px;
              }
              /deep/ .van-icon {
                display: flex;
                align-items: center;
              }
            }
            .placeholder {
              .van-cell__value--alone {
                color: #c8c9cc;
              }
            }
            /deep/.van-radio-group {
              .van-radio {
                margin-left: 20px;
                font-size: 12px;
                .van-radio__icon {
                  font-size: 15px;
                }
                .van-radio__icon--checked .van-icon {
                  background-color: #5f7290;
                  border-color: #5f7290;
                }
              }
            }
            .van-dropdown-menu {
              display: flex;
              align-items: center;
              justify-content: flex-end;
              position: relative;
            }
            /deep/ .van-dropdown-menu__title::after {
              display: none;
            }
            /deep/.van-dropdown-menu__item {
              justify-content: flex-end;
            }
            /deep/ .van-dropdown-menu__bar {
              height: 30px;
              box-shadow: none;
            }
            /deep/ .van-dropdown-item {
              // position: absolute;
              height: 500px;
              width: 100%;
              .van-dropdown-item__content {
                max-height: 50%;
              }
            }
            /deep/ .van-dropdown-menu__title {
              font-size: 12px;
              // color: #999999;
            }
            .is_select {
              background-color: #8ba018;
              padding: 3px 5px;
            }
          }
          .info_input_r {
            flex: 1;
            .info_fied_input {
              padding: 0 5px;
              width: 100%;
              height: 30px;
              line-height: 30px;
              font-size: 12px;
              resize: none;
            }
            /deep/.van-field__control {
              // color: #999999;
              text-align: right;
            }
            /deep/.van-icon {
              font-size: 12px;
            }
          }
        }
        .now_info_add {
          padding-bottom: 10px;
          .info_add-one {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #004db6;
            font-size: 15px;
            padding: 8px 0;
            border: 1px solid #004db6;
            border-radius: 5px;
            font-weight: 600;
            span {
              margin-left: 7px;
            }
          }
        }
      }
    }
  }
  // 底部
}
/deep/.tip_dialog {
  font-size: 14px;
  .van-dialog__header {
    padding-top: 12px;
    font-weight: 600;
    font-size: 16px;
  }
  .van-dialog__content {
    padding: 16px 20px 20px;
    .push_dia_box_content {
      line-height: 2;
      .icon_warn {
        color: #ee792f;
        font-size: 15px;
      }
    }

    .push_dia_commit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 12px;
      font-size: 15px;
      .van-checkbox {
        padding: 5px;
      }
      .van-checkbox__icon .van-icon {
        font-size: 16px;
      }
      .van-checkbox__icon--checked .van-icon {
        background-color: #f54040;
        border-color: #f54040;
      }
      .push_dia_commit_btn {
        color: #f54040;
        padding: 0 5px;
      }
    }
    .warning {
      color: #f54040;
      font-weight: 600;
    }
  }
}
/deep/.van-action-sheet {
  padding-bottom: 10px;
  max-height: 60%;
  .van-action-sheet__content {
    .van-action-sheet__item {
      border: none !important;
    }
  }
}
</style>
